<template>
  <div class="broadcasting-room">
    <search-table
            :url="listUrl"
            ref="searchtable"
            :columns="columns"
            :headParams="headParams"
            :defaultParams="userInfo.shopRoleCode == 'role:store:main' ? {} : defaultParams"
            :xLength="1200"
            :form="form">
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item v-if="userInfo.shopRoleCode == 'role:store:main'" label="直播平台">
            <a-select
              showSearch
              allowClear
              style="width: 195px"
              :options="liveAppIdList"
              v-decorator="[
                'appId',
                {
                  initialValue: userInfo.shopRoleCode == 'role:store:main' ? '100000054' : (userInfo.shopRoleCode == 'role:store:branch' ? '100000055' : '')
                }
              ]"
              placeholder="请选择"
              @change="appIdChange">
            </a-select>
          </a-form-item>
          <a-form-item v-if="userInfo.shopRoleCode == 'role:store:main'" label="所属店铺">
            <a-select
              showSearch
              allowClear
              style="width: 195px"
              v-decorator="[
                'blongShop',
                {
                  initialValue: 1
                }
              ]"
              placeholder="请选择所属店铺"
              @change="blongShopChange">
              <a-select-option :value="1">本店直播</a-select-option>
              <a-select-option v-if="activeAppId == '100000055'" :value="2">其它店直播</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="直播间名称">
            <a-input style="width: 195px" allowClear v-decorator="['name']" placeholder="请输入直播间名称"></a-input>
          </a-form-item>
          <a-form-item label="直播间ID">
            <a-input-number style="width: 195px" :precision="0" allowClear v-decorator="['roomId']" placeholder="请输入直播间ID"></a-input-number>
          </a-form-item>
          <a-form-item label="直播状态">
            <a-select
                showSearch
                allowClear
                style="width: 195px"
                :options="liveStatusList"
                v-decorator="['liveStatus']"
                placeholder="请选择">
            </a-select>
          </a-form-item>
          <a-form-item label="创建时间">
            <fast-range-picker
              v-decorator="[ 'startTime-endTime' ]"
            />
          </a-form-item>
        </a-form>
      </template>
      <!--列表上方操作按钮-->
      <template slot="oprationRow">
        <permission authority="room:addRoom">
          <a-button type="primary" icon="plus" @click="creatLive()">创建直播间</a-button>
        </permission>
        <permission authority="room:delete">
          <a-button type="danger" @click="deleteLive($refs.searchtable.selectedRows)">删除</a-button>
        </permission>
        <permission authority="room:syncroom">
          <a-button @click="syncLive($refs.searchtable.selectedRows)">同步直播间数据</a-button>
        </permission>
      </template>
      <!--列表中操作列中按钮-->
      <template slot="tableOperation" slot-scope="{ record }">
        <a-space>
          <permission v-if="record.liveStatus != '102'" authority="room:id">
            <span class="text-primary pointer" @click="checkLiveRoom(record, 'view')">查看</span>
          </permission>
          <permission v-if="activeBlongShop == 1 && record.liveStatus == '102'" authority="room:update">
            <span class="text-primary pointer" @click="checkLiveRoom(record, 'edit')">编辑</span>
          </permission>
          <permission v-if="record.liveStatus == '102' || record.liveStatus == '103' || record.liveStatus == '107' || record.liveStatus == '104'" authority="room:delete">
            <span class="text-danger pointer" @click="deleteLive([record])">删除</span>
          </permission>
          <permission authority="liveRoom:manager:browse">
            <span class="text-primary pointer" @click="browseGoods(record)">浏览上架商品</span>
          </permission>
        </a-space>
      </template>
    </search-table>
  </div>
</template>

<script>
  import { mapGetters } from "vuex";
  import { findDictNameByValue,createOptionsByDict } from '@/utils/dict'
  export default {
    name: "MarketingLiveRoom",
    components: {},
    data() {
      return {
        listUrl: '/room/page', // 列表接口地址
        form: this.$form.createForm( this, {
          name: "table_search",
          mapPropsToFields: () => {
            let appId='',blongShop=1
            if(this.$route.query.appId){
              appId = this.$route.query.appId
            } else {
              if(this.$store.state.userInfo.shopRoleCode == 'role:store:main') {
                appId=createOptionsByDict('LIVE_APPID')[0] ? createOptionsByDict('LIVE_APPID')[0].value : '100000054'
              } else if(this.$store.state.userInfo.shopRoleCode == 'role:store:branch') {
                appId=createOptionsByDict('LIVE_APPID')[1] ? createOptionsByDict('LIVE_APPID')[1].value : '100000055'
              }
            }
            if(this.$route.query.blong) {
              blongShop = Number(this.$route.query.blong)
            } else {
              blongShop = 1
            }
            return {
              appId: this.$form.createFormField({
                ...appId,
                value: appId,
              }),
              blongShop: this.$form.createFormField({
                ...blongShop,
                value: blongShop,
              })
            }
          }
        }), // 搜索条件表单
        activeAppId: this.$route.query.appId || '100000054', // 当前直播平台，默认100000054
        activeBlongShop: 1, // 当前所属店铺，默认为本店
        headParams: { baseURL: '/goldenhome/gh/live/admin' }, // 列表接口域名
        defaultParams: {
          appId: this.$store.state.userInfo.shopRoleCode == 'role:store:branch' ? '100000055' : '',
          blongShop: this.$store.state.userInfo.shopRoleCode == 'role:store:branch' ? 1 : null
        }, // 列表默认携带参数
        handle: '', // 操作类型
        liveAppIdList: createOptionsByDict('LIVE_APPID'), // 直播平台
        liveStatusList: createOptionsByDict('LIVE_STATUS'), // 直播间状态
        columns: [
          {
            title: "直播间ID",
            dataIndex: "roomId",
            width: 125,
            key: "roomId",
          },
          {
            title: "直播间名称",
            dataIndex: "name",
            width: 125,
            key: "name"
          },
          {
            title: "直播状态",
            dataIndex: "liveStatus",
            width: 125,
            key: "liveStatus",
            customRender: (text, record) => findDictNameByValue('LIVE_STATUS', text)
          },
          {
            title: "直播间图片",
            dataIndex: "coverImgLocal",
            width: 125,
            key: "coverImgLocal",
            customRender: (text, record) => {
              if(text) {
                return <table-img src={text}/>
              } else {
                return <table-img src={record.coverImg}/>
              }
            }
          },
          {
            title: "直播时间段",
            dataIndex: "startTime",
            width: 205,
            key: "startTime",
            customRender: (text, record) => {
              return record.startTime+' 至 '+record.endTime
            }
          },
          {
            title: "主播昵称",
            dataIndex: "anchorName",
            width: 125,
            key: "anchorName"
          },
          {
            title: "主播微信号",
            dataIndex: "anchorWechat",
            width: 125,
            key: "anchorWechat"
          },
          {
            title: "所属平台",
            dataIndex: "appName",
            width: 125,
            key: "appName"
          },
          {
            title: "所属机构",
            dataIndex: "orgName",
            width: 125,
            key: "orgName"
          },
          {
            title: "所属店铺",
            dataIndex: "shopName",
            width: 125,
            key: "shopName"
          },
          {
            title: "创建人",
            dataIndex: "createByName",
            width: 125,
            key: "createByName"
          },
          {
            title: "创建人账号",
            dataIndex: "phone",
            width: 125,
            key: "phone"
          },
          // {
          //   title: "身份类型",
          //   dataIndex: "userType",
          //   width: 155,
          //   key: "userType"
          // },
          {
            title: "创建平台",
            dataIndex: "thirdPartyTag",
            width: 125,
            key: "thirdPartyTag",
            customRender: (text, record) => findDictNameByValue('LIVE_GOOD_SOURCE', text)
          },
          {
            title: "创建时间",
            dataIndex: "createTime",
            width: 155,
            key: "createTime"
          },
          // {
          //   title: "分享量",
          //   dataIndex: "shareCount",
          //   width: 125,
          //   key: "shareCount"
          // },
          // {
          //   title: "订单量",
          //   dataIndex: "orderCount",
          //   width: 125,
          //   key: "orderCount"
          // },
          {
            title: "操作",
            dataIndex: "operation",
            fixed: 'right',
            width: 225,
            scopedSlots: { customRender: "operation" },
          }
        ]
      }
    },
    watch: {},
    computed: {
      ...mapGetters(["userInfo"]),
    },
    created() {},
    mounted() {},
    methods: {
      // 切换直播平台
      appIdChange(val) {
        this.activeAppId = val
        if(val == '100000054') {
          this.form.setFieldsValue({
            blongShop: 1,
          });
        }
      },
      // 切换所属店铺
      blongShopChange(val) {
        this.activeBlongShop = val
      },
      // 创建直播间
      creatLive() {
        this.handle = 'add';
        this.$router.push({
          name:'MarketingLiveRoomPagesForm',
          query: {
            handle: 'add',
            blong: this.activeBlongShop,
            appId: this.$refs.searchtable.searchParams.appId
          }
        })
      },
      // type view 查看   edit 编辑
      checkLiveRoom(record, type) {
        this.handle = type;
        this.$router.push({
          name:'MarketingLiveRoomPagesForm',
          query: {
            handle: type,
            id: record.roomId,
            blong: this.activeBlongShop,
            appId: this.$refs.searchtable.searchParams.appId,
            current: this.$refs.searchtable.pagination.current
          }
        })
      },
      // 删除直播间
      deleteLive(records) {
        if(records.length == 0) {
          this.$message.warning('请先选择一项后再进行操作！');
          return
        }
        if(records.filter(item => item.liveStatus=='101' ).length > 0){
          this.$message.warning('不能选择直播中的直播间！');
          return
        }
        if(records.filter(item => item.liveStatus=='105' ).length > 0){
          this.$message.warning('不能选择暂停的直播间！');
          return
        }
        if(records.filter(item => item.liveStatus=='106' ).length > 0){
          this.$message.warning('不能选择异常的直播间！');
          return
        }
        let roomIds = records.map((item) => {
          return item.roomId
        })
        let params = {}
        params.roomIds = roomIds
        params.appId = this.$refs.searchtable.searchParams.appId
        let _this = this;
        this.$confirm({
          title: '删除操作',
          content: '是否确定删除该直播间，删除后将不可恢复',
          okText: '确认删除',
          cancelText: '取消',
          onOk() {
            _this.$post('/room/delete',
                params,
                { baseURL: `${location.origin}/goldenhome/gh/live/admin` }).then((res) => {
              if (res && res.returnCode == 1000) {
                _this.$refs.searchtable.refreshTable();
              }
            });
          },
          onCancel() {},
        });
      },
      // 同步直播间数据
      syncLive(records) {
        let _this = this
        let roomIds = records.map((item) => {
          return item.roomId
        })
        let params = {}
        params.roomIds = roomIds
        params.appId = this.$refs.searchtable.searchParams.appId
        this.$post('/room/syncroom',
            params,
            { baseURL: `${location.origin}/goldenhome/gh/live/admin` }).then((res) => {
          if (res && res.returnCode == 1000) {
            _this.$message.success('同步成功');
            _this.$refs.searchtable.refreshTable();
          }
        });
      },
      // 浏览上架商品
      browseGoods(record) {
        this.$router.push({
          name:'MarketingLiveShelvesCommodity',
          query: {
            id: record.roomId,
            blong: this.activeBlongShop,
            appId: record.appId,
            current: this.$refs.searchtable.pagination.current
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">

</style>
